<template>
  <div id="app">
    <div v-if="isNavigator" style="width: 100%; height: 20px;background: white;position: fixed;top: 0;"></div>
    <transition :name="transitionName">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        isNavigator:false,
        transitionName: 'slide-right'
      }
    },
    beforeRouteUpdate (to, from, next) {
      // 如果isBack为true时，证明是用户点击了回退，执行slide-right动画
      let isBack = this.$router.isBack
      console.info("路由动画"+isBack)
      if (isBack) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
      // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
      this.$router.isBack = false
      next()
    },
    created: function () {
//      || window.navigator.userAgent.indexOf('LBLSIOS') > -1
//      window.navigator.userAgent.indexOf('innjiaAppAndroid') > -1
      if (window.navigator.userAgent.indexOf('LBLSIOS') > -1){
        this.isNavigator = true
      }else {
        this.isNavigator = false
      }
    }
  }

</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  .child-view {
    position: absolute;
    width:100%;
    height:100%;
    transition: all .4s cubic-bezier(.55,0,.1,1);
    /*transition: all .5s linear;*/
  }

  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    /*background-color: rgb(245,245,245);*/
  }
  #app{
    height: 100%;
    background: #f5f5f5;
  }
  /*路由动画*/
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }
</style>
